
<template>
  <div class="page-render-wrap" v-if="lowCodeJson">
    <el-form
      ref="formRef"
      :model="lowCodeJson?.model"
      :label-width="lowCodeJson?.globalConfig?.labelWidth + 'px'"
      :label-position="lowCodeJson?.globalConfig?.labelPosition"
      :size="lowCodeJson?.globalConfig?.size"
    >
      <template
        tag="div"
        v-for="(element, index) in lowCodeJson?.domTree?.items"
        :key="index"
      >
        <div v-if="element && element.key">
          <render-parse
            :element="element"
            :key="element?.key"
            :index="index"
            :parent="lowCodeJson?.domTree?.items"
          >
          </render-parse>
        </div>
      </template>
    </el-form>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, provide, reactive } from "vue";
import { createLowCode } from "@/components/low-code/core/index";

export default defineComponent({
  name: "page-render",
  props: ["pageJson"],
  setup(props) {
    const lowCodeJson = createLowCode({
      ...props.pageJson,
    });

    provide("getLowCodeInstance", () => {
      return lowCodeJson;
    });

    return {
      lowCodeJson,
    };
  },
});
</script>

<style  scoped>
.page-render-wrap {
}
</style>
